<template>
  <van-grid :column-num="1" >
      <van-grid-item :to="`/subject/detail/${subjectItem.id}`">
        <van-image :src="subjectItem.scene_pic_url" />
        <div class="content">
          <span class="title">{{subjectItem.title}}</span>
          <span class="subtitle van-multi-ellipsis--l2">{{subjectItem.subtitle}}</span>
          <span class="price">{{subjectItem.price_info}}元起</span>
        </div>
      </van-grid-item>
    </van-grid>
</template>

<script>
export default {
name: 'ListItem',
props: {
  subjectItem: {
    type: Object,
    required: true
  },
},
}
</script>

<style lang="less" scoped>
/deep/ .van-image__img {
   height: 5.33333rem
 }
 .content {
   display: flex;
   flex-direction: column;
   width: 100%;
   text-align: center;
   margin-top: 20px;
   overflow: hidden;
   .title {
     font-size: .48rem;
     margin-bottom: 20px;
   }
   .subtitle {
     font-size: .34rem;
     color: #666;
     height: 1.33333rem;
     line-height: .54rem

   }
   .price {
     color: red;
     font-size: .34 rem;
   }
 }
</style>